<script lang="ts" setup>
import {ref} from "vue";
import apiJson from '@/assets/componentsApi.json'
import ExampleBasic from './exampleBasic.vue'
import {ElInput} from 'element-plus'
console.log(ElInput.props)
const prefix = 'library.CisTable.examples'
const examples = ref([
  {
    title: '基础用法',
    key: 'basic',
    des: '表格的最简单用法。',
    code: _.get(apiJson, `${prefix}.basic`),
    codeShow: false
  }
])

/*
 * 显示隐藏代码
 * key 示例类型的key值
 */
const codeToggle = (key: String) => {
  let ex = _.head(_.filter(examples.value, (item: any) => {
    return item.key === key;
  })) as any;
  ex.codeShow = !ex.codeShow;
}
</script>
<template>
  <ComponentAPI
      title="CisTable 表格"
      des="主要用于展示大量结构化数据。<br>支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。"
      :examples="examples"
      :api="apiJson.library.CisTable.api"
      @codeToggle="codeToggle"
  >
    <template v-slot:basic>
      <div class="h-300px">
        <ExampleBasic></ExampleBasic>
      </div>
    </template>
  </ComponentAPI>

</template>
